<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8">

	<script data-ui5-config type="application/json">
		{
			"theme": "sap_horizon_hcb",
			"language": "EN"
		}
	</script>

	<script src="%VITE_BUNDLE_PATH%" type="module"></script>

	<link rel="stylesheet" type="text/css" href="./styles/HCB.css">
</head>

<body class="hcb1auto">
	<ui5-button class="margin">Default</ui5-button>

	<ui5-input class="margin"></ui5-input>


	<ui5-date-picker id="qqq" value-state="Negative" placeholder="Enter Date..." class="margin"></ui5-date-picker>
	<ui5-date-picker id="qqq" value-state="Critical" placeholder="Enter Date..." class="margin"></ui5-date-picker>


	<ui5-calendar class="margin" ></ui5-calendar>


	<script>
		document.getElementById("qqq").addEventListener("ui5-change", function(event) { console.log('change') });
	</script>
</body>
</html>
